<template>
    <!-- 使用 ref 属性为 div 元素添加引用 -->
    <div ref="chartRef" class="chart"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            // 城市列表
            cities: ['北京', '上海', '深圳', '广州'],
            // 人口涌入数据
            influxData: [1200, 1500, 1000, 1300],
            // 人口流失数据
            outflowData: [-800, -900, -700, -1100]
        };
    },
    mounted() {
        this.$nextTick(() => {
            // 通过 $refs 获取 ref 引用的 DOM 元素
            const chartDom = this.$refs.chartRef;
            if (!chartDom) {
                console.error('未找到有效的 DOM 元素');
                return;
            }
            const myChart = echarts.init(chartDom);

            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
        left: '15%',
        right: '%',
        top: '2%',
        bottom: '8%'
      },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['北京', '上海', '深圳', '广州'],
                    axisLabel: {
                        // 设置文字颜色为白色
                        color: 'white',
                        // 设置文字字号为 16px
                        fontSize: 16 
                    }
                },
                series: [
                    {
                        name: '人口涌入',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        data: [1200, 1500, 1000, 1300]
                    },
                    {
                        name: '人口流出',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        data: [-800, -900, -700, -1100]
                    }
                ]
            };

            myChart.setOption(option);
        });
    }
};
</script>
<style scoped>
.chart{
    width: 460px;
     height: 350px; 
     /* border: red 1px solid; */
     margin-top: -90px;
     margin-left: -10px;
}
</style>
    